<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>疫情上报系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <!--    <script src="bootstrap/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>-->
    <!--    <script src="bootstrap/js/jquery-3.1.1.js"></script>-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
</head>
<body>
<!--th:if="${#authorization.expression('hasAuthority(''role:add'')')}"  style="display:block"-->
<div id="app">
    <el-container>
        <el-header>
            <el-tag type="danger">疫情上报系统</el-tag>
            <el-button   type="primary" round size="medium" icon="el-icon-document "plain @click="admin">打印信息</el-button>
            <el-button type="danger" round size="medium" icon="el-icon-user" plain @click="signout">退出登录</el-button>

<!--            <input type="button" value="退出登录" th:onclick="signOut()">-->
            <!--            <el-tag-->
            <!--                    v-for="item in items"-->
            <!--                    :key="item.label"-->
            <!--                    :type="item.type"-->
            <!--                    effect="dark">-->
            <!--                {{ item.label }}-->
            <!--            </el-tag>-->
        </el-header>
        <el-main>
            <div class="main">
                <el-row justify="center">
                    <el-col :lg="{span:6,offset:9}">
                        <el-input v-model="newTemp.id" placeholder="请输入">
                            <template slot="prepend">学号</template>
                        </el-input>
                    </el-col>
                </el-row>
<!--                <el-row>-->
<!--                    <el-col :lg="{span:6,offset:9}">-->
<!--                        <el-input v-model="newTemp.tempAM" placeholder="上午">-->
<!--                            <template slot="prepend">体温</template>-->
<!--                            <template slot="append">℃</template>-->
<!--                        </el-input>-->
<!--                    </el-col>-->
<!--                </el-row>-->
                <el-row>
                    <!--                    <el-col :lg="{span:4,offset:10}" :xs="{span:16,offset:4}">-->
                    <el-col :lg="{span:6,offset:9}">
                        <el-input v-model="newTemp.temperature" placeholder="测量体温">
                            <template slot="prepend">体温</template>
                            <template slot="append">℃</template>
                        </el-input>
                        <el-tag type="success">例如36.5</el-tag>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :lg="{span:6,offset:9}">
                        <el-input v-model="newTemp.address" id="address1" placeholder="现处位置">
                            <template slot="prepend">位置</template>
                            <el-button round type="primary" icon="el-icon-location" slot="suffix" plain
                                       @click="location">定位
                            </el-button>
                            <!--        <template slot="append">℃</template>-->
                        </el-input>

                        <!--                        <el-tag type="success">例如36.5</el-tag>-->
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :lg="{span:6,offset:9}">
                        <el-input :rows="3" type="textarea" v-model="newTemp.des" placeholder="若有不适请描述情况"></el-input>
                        <el-tag type="danger">若超过37.3℃</el-tag>
                    </el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="center">
                    <el-button round type="success" size="medium" plain @click="submit">上报信息
                    </el-button>
                </el-row>

                <el-row type="flex" class="row-bg" justify="center">

<!--                    <el-button round type="success" size="medium"  th:onclick="signOut">退出登录-->
<!--                    </el-button>-->
                </el-row>




            </div>
        </el-main>

    </el-container>


</div>
</body>
<!-- import Vue before Element -->
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<!-- import JavaScript -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<script>
    // (function ($) {
    //     $.ajax({
    //         type: "post",
    //         //后端的请求地址
    //         url: "/patientCount",
    //         dataType: "json",
    //         success: function (data) {
    //             console.log(data);
    //         },
    //         error:function (XMLHttpRequest, textStatus, errorThrown) {
    //             alert("请求失败！");
    //         }
    //     });
    // })(jQuery);

    //
    // $.ajax({
    //     type: "post",
    //     data: studentInfo,
    //     contentType: "application/json",
    //     url: "/Home/Submit",
    //     beforeSend: function () {
    //         // 禁用按钮防止重复提交
    //         $("#submit").attr({ disabled: "disabled" });
    //     },
    //     success: function (data) {
    //         if (data == "Success") {
    //             //清空输入框
    //             clearBox();
    //         }
    //     },
    //     complete: function () {
    //         $("#submit").removeAttr("disabled");
    //     },
    //     error: function (data) {
    //         console.info("error: " + data.responseText);
    //     }
    // });
    var token;
    $(document).ready(function () {
        $.ajax({
            async: false,
            url: "/idempotentGenerator",
            type: "post",
            success: function (data) {
                token=data;
                console.log(token);
            }
        });



    });

    function signOut() {
        $.ajax({
            type: "get",
            url: "/logout",
            dataType: "json",
            success: function (data) {
                if (data.success) {
                    window.location = "/";
                }
            }
        })
    }

    new Vue({

        el: '#app',
        data: {
            isDisable: true,
            newTemp: {
                id: '',
                temperature: '',
                des: '',
                address: ''

            },
            items:
                {type: 'warning', label: 0},

        },

        // beforeCreate: function () {
        //     axios.get('http://www.dzyong.top:3005/yiqing/total').then(function (response) {
        //
        //         this.items = {
        //             label: response.data.data[0].death
        //         // suspect: response.data.data[0].suspect,
        //         // death: response.data.data[0].death,
        //         // cured: response.data.data[0].cured
        //     }
        //         ;
        // var jsonData = JSON.stringify(response.data);
        // alert(JSON.stringify(temp));

        // {"data":[{"id":1,"diagnosed":68584,"suspect":8228,"death":1666,"cured":9547,"date":"2020-02-16 14:41:17"}]}
        // })
        // },
        methods: {
            temp: '',
            submit: function () {
                this.newTemp = {
                    id: this.newTemp.id,
                    temperature: this.newTemp.temperature,
                    des: this.newTemp.des,
                    address: this.newTemp.address
                };
                console.log(this.newTemp.id);
                console.log(this.newTemp.temperature);
                console.log(this.newTemp.des);
                console.log(this.newTemp.address);

                var notify = this.$notify;

                function alertMessage(title, message, type) {
                    notify({
                        title: title,
                        message: message,
                        type: type,
                        duration: 3000,
                        position: 'bottom-right',
                        offset: 100
                    });
                }

                let config = {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'token': token
                    }
                }

                // $.ajax({
                //     type: "post",
                //     url: '/updateInfo',
                //     data: this.newTemp,
                //     dataType: "json",
                //     traditional: true,
                //     async: false,
                //     //再次添加头部信息
                //     beforeSend: function (request) {
                //         request.setRequestHeader("token", token);
                //     },
                //     success: function (data) {
                //         alertMessage('上报成功', '谢谢配合', 'success')
                //     }
                // });

                axios.defaults.headers.common['token'] = token;

                axios.post('/updateInfo', this.newTemp)
                    .then(function (response) {
                        console.log("成功");
                        alertMessage('上报成功', '谢谢配合', 'success')
                    })
                    .catch(function (error) {
                        console.log(error);
                        console.log("不存在");
                        alertMessage('信息错误', '请检查学号', 'error');
                    });
            },
            location: function () {
                $.ajax({
                    // url: '/locate',
                    url: 'http://pv.sohu.com/cityjson?ie=utf-8',
                    dataType: "script",
                    success: function (data) {
                        // var locate=data;
                        var cname = returnCitySN.cname;
                        console.log(cname);
                        parent.document.getElementById("address1").value = cname;
                        $('#address1').val();
                        //触发一下该input的input事件
                        $('#address1')[0].dispatchEvent(new Event('input'));
                        // $(function () {
                        //     $("#address").autocomplete({
                        //         source: cname
                        //     });
                        // });
                        // this.newTemp = {
                        //     address: cname
                        // };
                        // console.log(this.newTemp.address);
                        // this.address='';
                        //  this.address=cname;
                        // console.log(address);
                    }
                });

            },
            signout: function () {
                $.ajax({
                    type: "get",
                    url: "/logout",
                    dataType: "json",
                    success: function (data) {
                        if (data.success) {
                            window.location = "/";
                        }
                    }
                })
            },

            admin: function () {
                var notify = this.$notify;
                function alertMessage1(title, message, type) {
                    notify({
                        title: title,
                        message: message,
                        type: type,
                        duration: 3000,
                        position: 'bottom-right',
                        offset: 100
                    });
                }
                $.ajax({
                    async: false,
                    type: "get",
                    url: "/check_permission",
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data == true) {

                            window.location="/adminManage";
                        } else {
                            alertMessage1('请求失败', '管理员才能打印', 'error');
                        }
                        // var currentBtn = parent.document.getElementById(play);
                        // if(currentBtn!="") {


                        // }

                    }
                });

            }
        },
    })


    // js防抖动
    // plugin.prototype.debounce = function (handle, delay) {
    //     var timer = null;
    //     return function () {
    //         var self = this;
    //         var args = arguments;
    //         clearTimeout(timer);
    //         timer = setTimeout(function () {
    //             handle.apply(self, args)
    //         }, delay)
    //     }
    // };
    // $.debounce(handle, 5000);


</script>

<!--<script type="module">-->
<!--    import { regionData, CodeToText } from "element-china-area-data";-->


<!--    export default {-->
<!--        name: "app1",-->
<!--        data() {-->
<!--            return {-->
<!--                options: regionData,-->
<!--                selectedOptions: []-->
<!--            };-->
<!--        },-->

<!--        methods: {-->
<!--            handleChange() {-->
<!--                var loc = "";-->
<!--                for (let i = 0; i < this.selectedOptions.length; i++) {-->
<!--                    loc += CodeToText[this.selectedOptions[i]];-->
<!--                }-->
<!--                alert(loc);-->
<!--            }-->
<!--        }-->
<!--    };-->

<!--</script>-->
<!--<script>-->

<!--    jQuery.getScript(-->
<!--        "http://pv.sohu.com/cityjson?ie=utf-8",function(data){-->
<!--            //localIP = returnCitySN["cip"];-->
<!--            console.log(returnCitySN);-->
<!--        });-->
<!--</script>-->
<style>
    .el-row {
        padding: 10px;
    }

    #app {

        background: url('/static/images/bg2.jpeg');

        height: 100%;

        width: 100%;

        overflow: hidden;

        background-size: cover;
    }

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    .el-header {
        margin-top: 20px;
    }
</style>
</html>